import { Space, Card, Menu, Button, message, Tag } from "antd"
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons'
import MenuItem from "antd/lib/menu/MenuItem"
import { useEffect } from "react"
import { useState } from "react"
import { http } from "../../utils"
import '../student/index.scss'
import { useNavigate } from "react-router-dom"


function getItem (label, key, icon, items, type) {
  return {
    key,
    icon,
    items,
    label,
    type,
  }
}
const items = [
  getItem('开课中', 'kaikezhong'),
  getItem('我听的课', 'myCourse'),

]
function SelectCourse () {

  const navigate = useNavigate()
  const [allCourseList, setAllCourseList] = useState([])
  const [myCourseList, setMyCourseList] = useState([])

  async function getAllCourse () {
    const res = await http.get('/base_server/api/v1/pub/course/list/all')
    setAllCourseList(res.data)
  }
  async function getMyCourse () {
    const res = await http.get('/base_server/api/v1/pub/course/selected/list')
    setMyCourseList(res.data)
  }
  useEffect(() => {
    getAllCourse()
    getMyCourse()
    setMenuKey('myCourse')
  }, [])
  const [menuKey, setMenuKey] = useState()
  const click = (e) => {
    setMenuKey(e.key)
  }
  const onClick = async (num) => {
    try {
      await http.post(`/base_server/api/v1/pub/course/join${'?course_id='}${num}`)
    } catch (e) {
      message.error(e.response?.data?.message || '加入课程失败')
    }
  }
  const seachTest = async (id) => {
    console.log(id)
    const res = await http.get(`/base_server/api/v1/pub/paper/test/list/find_by_page${'?course_id='}${id}`)
    const testList = res.data.records
    navigate('/student/testInCourse', { state: { res: { testList }, id: { id } } })

  }
  return (
    <div className="se-st">
      <div className="head-sc">
        <Menu mode="horizontal" defaultSelectedKeys='myCourse' onClick={click} items={items}>

        </Menu>
      </div>
      {menuKey === 'kaikezhong' ? <div className="content-course">
        {allCourseList.map((item, index) => {
          return (
            <Space key={index} style={{ margin: 30 }}>
              <Card title={item.subject_name} style={{
                width: 350,

              }}
                actions={[
                  <SettingOutlined key="setting" />,
                  <EditOutlined key="edit" />,
                  <EllipsisOutlined key="ellipsis" />,
                ]}
              >
                <Space className="course-list" >
                  <p>任课教师: {item.teacher_name}</p>
                  <Button className="btn-joinCourse" onClick={() => { onClick(item.id) }}>加入课程</Button>
                </Space>

              </Card>
            </Space>

          )
        })}
      </div> : null}
      {menuKey === 'myCourse' ? <div className="content-course">
        {myCourseList.map((item, index) => {
          return (
            <Space key={index}>
              <Card title={item.course_name} style={{
                width: 300,
              }}
                actions={[
                  <Button>退课</Button>,
                  <Button type="primary" onClick={() => { seachTest(item.course_id) }}>查看课程考试</Button>,

                ]}
              >
                <Space>
                  <p>{item.course_id}</p>
                  <p className="p-course-status">课程状态:  {item.status === 1 ? <Tag color="blue">授课中</Tag > : <Tag>已结课</Tag>}</p>
                </Space>

              </Card>
            </Space>

          )
        })}
      </div> : null}
    </div>)
}

export default SelectCourse